<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

    <!--头部css样式-->
    <head th:fragment="head-fragment">
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content="Free Bootstrap Themes" />
        <meta name="author" content="" />

        <title>我的个人博客</title>

        <!-- Bootstrap Core CSS -->
        <link th:href="@{/blog/resources/css/bootstrap.min.css}" rel="stylesheet">
        <!-- Favicon-->
        <link rel="shortcut icon" th:href="@{/img/favicon.png}" type="text/css">
        <!-- Custom CSS -->
        <link th:href="@{/blog/resources/css/style.css}" rel="stylesheet">

        <!-- Custom Fonts -->
        <link th:href="@{/blog/resources/font-awesome/css/font-awesome.min.css}" rel="stylesheet" type="text/css">
        <!--[if lt IE 9]>
        <script th:src="@{/blog/resources/js/html5shiv.js}"></script>
        <script th:src="@{/blog/resources/js/respond.min.js}"></script>
        <![endif]-->
    </head>

    <!-- /////////////////////////////////////////Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" th:fragment="nav-fragment">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <a class="navbar-brand page-scroll" th:href="@{/}">Personal Blog</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="page-scroll" th:href="@{/}">主页</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="https://gitee.com/AegeanP/personal-blog">Gitee</a>
                    </li>
                    <li>
                        <a class="page-scroll" th:href="@{/details/88}">关于</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <!-- Navigation -->

    <!-- /////////////////////////////////////////Header -->
    <header id="page-top" th:fragment="page-top">
        <div class="wrap-header">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="intro-text">
                            <div class="intro-lead-in">Welcome To My Personal Blog!</div>
                            <div class="intro-heading">It's Nice To Meet You</div>
                        </div>
                        <a th:href="@{/details/88}" class="btn btn-1">About Me</a>
                        <a th:href="@{/details/88}" class="btn btn-2">Contact Me</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Header -->

    <!--侧边工具栏-->
    <div id="sidebar" class="col-md-4" th:fragment="side-bar">
        <div class="widget wid-vid">
            <div class="heading"><h4>搜索文章</h4></div>
            <div class="content">
                <div class="sidebar-search">
                    <form method="get" onsubmit="return false;" accept-charset="utf-8">
                        <div class="search-input">
                            <input type="text" style="width: 210px;display:inline" name="keyword" class="form-control" id="searchbox" placeholder="输入关键字搜索(博客名/类别)" required="required"/>
                            <button class="btn btn-2"  style="display:inline" onclick="search()">搜索</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="widget wid-tags">
            <div class="heading"><h4>类别页</h4></div>
            <div class="content">
                <ul class="list-inline" id="category">
                    <!--获取所有类别-->
                    <th:block th:each="category:${blogCategories}">
                        <li><input name="categoryId" style="display: none;" th:value="${category.getId()}">
                            <a onclick="queryForCategoryId()" th:text="${category.getName()} + '(' + ${category.getCount()} + ')'" name="categoryName">
                            </a></li>
                    </th:block>
                </ul>
            </div>
        </div>
        <div class="widget wid-tags">
            <div class="heading"><h4>标签页</h4></div>
                <div class="content">
                    <ul class="list-inline" id="tag">
                        <!--获取所有标签-->
                        <th:block th:each="tag:${tags}">

                            <li><input name="tagId" style="display: none;" th:value="${tag.getId()}">
                                <a onclick="queryForTagId()" th:text="${tag.getName()}" name="tagName">
                                </a></li>
                        </th:block>
                    </ul>
                </div>
            </div>

        <div class="widget wid-posts">
            <div class="content">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#most">点击最多</a></li>
                    <li><a data-toggle="tab" href="#recent">最新发布</a></li>
                </ul>
                <div class="tab-content">
                    <div id="most" class="tab-pane fade in active">
                        <div class="post">
                            <th:block th:each="blogDto:${blogDtos}">
                                <a th:href="'/details/' + ${blogDto.getBlogId()}"><img th:src="${blogDto.getBlogCoverImage()}" style="width: 128px;height: 64px;display:block;"/></a>
                                <div class="wrapper">
                                    <h5><a th:href="'/details/' + ${blogDto.getBlogId()}" th:text="${blogDto.getBlogTitle()}" style="text-transform: none"></a></h5>
                                    <p th:text="${blogDto.getAboutTime()}"></p>
                                </div>
                            </th:block>
                        </div>
                    </div>
                    <div id="recent" class="tab-pane fade">
                        <div class="post">
                            <th:block th:each="recentBlog:${recentBlogs}">
                                <a th:href="'/details/' + ${recentBlog.getBlogId()}"><img th:src="${recentBlog.getBlogCoverImage()}" style="width: 128px;height: 64px;display:block;"/></a>
                                <div class="wrapper">
                                    <h5><a th:href="'/details/' + ${recentBlog.getBlogId()}" th:text="${recentBlog.getBlogTitle()}" style="text-transform: none"></a></h5>
                                    <p th:text="${recentBlog.getAboutTime()}"></p>
                                </div>
                            </th:block>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- /////////////////////////////////////////Footer -->
    <footer th:fragment="footer">
        <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="copyright">Copyright &copy; 2020 Aegean blog.size <br/>All rights reserved.my personal blog #Version 1.0</div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer -->

    <!--js-->
    <div th:fragment="JavaScript-fragment">
        <!-- jQuery -->
        <script th:src="@{/blog/resources/js/jquery-1.11.3.min.js}"></script>

        <!-- Bootstrap Core JavaScript -->
        <script th:src="@{/blog/resources/js/bootstrap.min.js}"></script>

        <!-- Custom Theme JavaScript -->
        <script th:src="@{/blog/resources/js/agency.js}"></script>

        <!-- Plugin JavaScript -->
        <script th:src="@{/blog/resources/js/jquery.easing.min.js}"></script>
        <script th:src="@{/blog/resources/js/classie.js}"></script>
        <script th:src="@{/blog/resources/js/cbpAnimatedHeader.js}"></script>
        <!--自己写的 common.js-->
        <script th:src="@{/blog/js/common.js}"></script>
        <!--鼠标点击爱心特效-->
        <script type="text/javascript">
            !function (e, t, a) {function r() {for (let e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);
        </script>
    </div>

</html>